<script setup>
import {ref} from 'vue';
import { defineProps, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '../assets/main.css';
import HeaderBar from '../components/HeaderBar.vue';
import { IotApi } from '../js/apis';
import * as atom from '../js/atom';

const router = useRouter();

const params = defineProps({
    device_id: String //如果为空，则是新增模式
});

const edit_mode =  atom.okstr(params.device_id);
const title = edit_mode?"设备属性":"添加设备";

const device_name=ref('');
const device_type=ref('');
const active_code = ref('');
const device_types = ref([]);

onMounted(()=>{
    IotApi.get_device_types().then(
        function fulfilled(values){
            console.log('fulfilled', values);
            for(var i=0; i<values.length; i++){
                var dt = values[i];
                IotApi.log('dt:', dt);
                device_types.value.push({'value': dt.dtid, 'name': dt.name});
            }
            
        },
        function rejected(error){
            IotApi.log('rejected', error);
        }
    ).catch(function onrejected(reason){
        IotApi.log('onrejected', reason);
    });
});

const do_submit=()=>{
    if(!(atom.check_input("device_name", "名称")&&
    atom.check_input("device_type", "设备类型")&&
    atom.check_input("active_code", "激活码"))){
        return;
    }

    if(edit_mode){
        IotApi.modify_device_name(device_name.value, active_code.value).then((value)=>{
            if(value.code==0){
                router.back();
            }else{
                alert(value.msg);
            }
        }, (reason)=>{
            alert(reason);
        }).catch((reason)=>{
            alert(reason);
        })
    }else{
        IotApi.active_device(device_name.value, active_code.value).then((value)=>{
            if(value.code==0){
                router.back();
            }else{
                alert(value.msg);
            }
        }, (reason)=>{
            alert(reason);
        }).catch((reason)=>{
            alert(reason);
        })
    }
    
}

</script>

<template>
    <div class="editor">
        <div>
            <HeaderBar :title="title" back="false"></HeaderBar>
        </div>
        <div>
            <table>
                <tr class="tr">
                    <td class="title-col">设备名称</td>
                    <td class="input-col"><input type="text" name="device_name" v-model="device_name"></td>
                </tr>
                <tr>
                    <td class="title-col">设备类型</td>
                    <td class="input-col">
                        <select name="device_type"  v-model="device_type" v-bind:readonly="edit_mode">
                            <option v-for="dt in device_types" :key="dt.value" :value="dt.vlaue">{{dt.name}}</option>
                        </select>
                    </td>
                </tr>
                
                <tr>
                    <td class="title-col">激活码</td>
                    <td class="input-col">
                        <input type="text" name="active_code" v-model="active_code" v-bind:readonly="edit_mode">
                    </td>
                </tr>
            </table>
        </div>

        <div class="btn-div">
           <button class="ok-btn" @click="do_submit">确定</button>
        </div>
    </div>
</template>

<style scoped>

.editor{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

table{
    width: 100%;
}

table, tr, td{
    margin: 0;
    border-bottom: 1px solid lightgray;
    border-collapse: collapse;
}
.title-col{
    width: 5rem;
    height: 2rem;
    text-align: right;
}
.input-col{
    padding-right: 0.5rem;
}
.input-col input, select{
    border: none;
    height: 1.5rem;
    width: 100%;
    padding: 0;
    margin-left: 0.5rem;
    margin-right: 1rem;
}

.btn-div{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    flex: 1;
}
</style>